/*
 * @Author: Yxliam
 * @Date: 2024-01-18 10:29:05
 * @LastEditors: Yxliam
 * @LastEditTime: 2024-01-19 11:43:17
 * @Description:
 */
import React, { memo, useState, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  ImageBackground,
  Image,
  Animated,
  TouchableOpacity,
  Modal,
} from "react-native";
import {
  ScrollView,
  GestureHandlerRootView,
} from "react-native-gesture-handler";
import { p } from "utils/pxToDp";
import themeStore from "stores/theme";
import YText from "components/YText";
import Ionicons from "@expo/vector-icons/Ionicons";
import commonStyle from "utils/style";

const bgImg = {
  uri: "https://eat.toolbon.com/static/images/login.jpeg",
};

const My = (props:any) => {
  const theme = themeStore.theme;

  // console.log('props-->',props);

  const goPath = ()=>{
    props.navigation.push('Skin')
  }


  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={[styles.pagegest]}>
        <ImageBackground source={bgImg} style={styles.backgroundImage}>
          
        </ImageBackground>
        <View
          style={[
            styles.wrapper,
            {
              backgroundColor: theme.mybg,
            },
          ]}
        >
          <View style={styles.facebox}>
            <View style={styles.faceinner}>
            <Image
              source={require("../../assets/girl.png")}
              style={styles.face}
            />
            <Image
              source={require("../../assets/edit.png")}
              style={styles.editname}
            />
            </View>
            
          </View>
          <View style={styles.userInfo}>
            <YText color={theme.mainText} size={theme.f34} bold>
              奇妙的双子座1
            </YText>
            {/* <Image source={require('assets/edit.png')} style={styles.editname}/> */}
            <View>
              <YText
                style={{ marginTop: p(20) }}
                color={theme.secondText}
                size={theme.f26}
                bold
              >
                噢，这个人还木有简介~
              </YText>
            </View>
          </View>

          {/*  vip卡片 */}
          <View
            style={[
              styles.vipcard,
              commonStyle.flexrowcenterbetween,
              {
                backgroundColor: theme.myvipbg,
              },
            ]}
          >
            <View style={[commonStyle.flexrow]}>
              <Image
                source={require("assets/my-vip.png")}
                style={styles.myvip}
              />
              <View>
                <YText color={theme.mainText} size={theme.f28} bold>
                  解锁会员
                </YText>
                <YText
                  style={{ marginTop: p(10) }}
                  color={theme.lightText}
                  size={theme.f22}
                >
                  你还不是会员，加入会员解锁更多功能~
                </YText>
              </View>
            </View>
            <View style={styles.viparrowr}>
              <Ionicons name="chevron-forward" color={"white"} size={16} />
            </View>
          </View>

          <View
            style={[
              styles.vipcard,
              commonStyle.mt40,
              {
                backgroundColor: theme.myvipbg,
              },
            ]}
          >
            <View
              style={{
                marginBottom: p(30),
              }}
            >
              <YText color={theme.mainText} size={theme.f32} bold>
                设置
              </YText>
            </View>
            <TouchableOpacity onPress={()=>goPath()}>
              <View style={[styles.navitem, commonStyle.flexrowcenterbetween]}>
                <View>
                  <YText color={theme.mainText} size={theme.f26} bold>
                    换肤
                  </YText>
                </View>
                <View>
                  <Ionicons name="chevron-forward" size={16} color={theme.mainText}/>
                </View>
              </View>
            </TouchableOpacity>

            <TouchableOpacity>
              <View style={[styles.navitem, commonStyle.flexrowcenterbetween]}>
                <View>
                  <YText color={theme.mainText} size={theme.f26} bold>
                    关于
                  </YText>
                </View>
                <View>
                  <Ionicons name="chevron-forward" size={16} color={theme.mainText}/>
                </View>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  backgroundImage: {
    position:'relative',
    height: p(350),
  },
  pagegest: {
    flex: 1,
  },
  wrapper: {
    position: "relative",
    zIndex:1,
    top: -p(40),
    borderTopLeftRadius: p(30),
    borderTopRightRadius: p(30),
    paddingHorizontal: p(20),
    paddingVertical: p(20),
    flex: 1,
  },
  facebox: {
    position: "absolute",
    left: 0,
    right: 0,
    top: -p(120),
    zIndex: 3,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  face: {
    position:'relative',
    zIndex:3,
    width: p(200),
    height: p(200),
    borderRadius: p(100),
    borderColor: "white",
    borderWidth: 5,
  },
  userInfo: {
    position: "relative",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    marginTop: p(100),
  },
  faceinner:{
    position:'relative'
  },
  editname: {
    position: "absolute",
    zIndex: 3,
    right: p(10),
    bottom: p(10),
    width: p(50),
    height: p(50),
  },
  viparrowr: {
    padding: p(6),
    borderRadius: p(10),
    backgroundColor: "black",
  },
  vipcard: {
    paddingHorizontal: p(30),
    paddingVertical: p(20),
    borderRadius: p(25),
    marginHorizontal: p(20),
    marginTop: p(40),
    shadowColor: "#ffffff",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.1,
    shadowRadius: p(5),
    elevation: p(5),
  },
  myvip: {
    width: p(80),
    height: p(80),
    marginRight: p(10),
  },
  navitem: {
    paddingVertical: p(20),
  },
});

export default My;
